<template>
  <div>
    <header-top title="学生请假" >
      <div @click="$router.back()" class="back" slot="back"></div>
    </header-top>
    <div style="background: #f2f2f2"  class="content clearfix">

      <ul class="leave">

        <li v-for="list in leaveList" @click="leaveCon(list.leaveId)">
          <div class="leaveTxt">
            <h3>{{list.studentName}}的{{list.leaveTitle}}</h3>
            <p><span>{{list.gradeName+list.className}}</span><span>{{list.createTime.slice(0,10)}}</span></p>
          </div>
          <div class="leaveType" v-html="leaveStatus(list.status)">
              <span class="replyed">已回复</span>
          </div>
        </li>

      </ul>


    </div>
  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import teacherClass from "@/components/teacherClass/teacherClass";
  import {reqLeave} from "@/api";

  export default {
    name: "leave",
    data(){
      return{
        leaveList:[],
        params:{
          leaveId:null,
        }
      }
    },
    async mounted(){
      let list = await reqLeave()
      this.leaveList = list.data
    },
    components:{
      headerTop:headerTop,
      teacherClass:teacherClass,
    },
    methods:{
      leaveStatus(type){
        let text = null
        let status = null
        if(type == 'PROCESSED'){
          text = '已查看'
          status = 'processed'
        }else if(type == 'TIMEOUT'){
          text = '已超时'
          status = 'timeout'
        }else if(type == 'REPLYED'){
          text = '已回复'
          status = 'replyed'
        }else if(type == 'PROCESSING'){
          text = '待处理'
          status = 'processing'
        }

        return '<span class="' + status + '">' + text + ' </span>'
      },
      leaveCon(leaveId){
        this.params.leaveId = leaveId;
        this.$router.replace({path:'/class/leave/detail',query:this.params})
      }
    }
  }
</script>

<style scoped>
  .leave{width: 100%; }
  .leave li{ height: 6rem; margin-bottom: 1px;background: #fff; padding: 0 1rem;}
  .leaveTxt{ float: left;}
  .leaveTxt h3{ font-size: 1.1rem; height: 1.1rem; line-height: 1.1rem; margin: 1.5rem 0 0.3rem 0; font-weight: normal;}
  .leaveTxt span{ font-size: 0.9rem; height: 0.9rem; margin-right: 0.5rem; color: #999;}
  .leaveType{ float: right; margin-top: 1.9rem;}



</style>
